<template>
    <div class="viewClass">
        <Header title="查看课程"/>
        <van-cell-group inset class="vancell-class" v-for="item in classList" :key="item.id" >
            <!-- header-->
            <van-cell value="内容">
                <template #title>
                    <span style="display: flex; align-items: center;font-weight: bold;font-size: 3.5vw;color: black;">
                        <span class="hLabel-class"></span>
                        <span class="name-class">{{item.courseName}}</span>
                    </span>
                </template>
                <template #value>
                    <span class="view-class" v-if="item.isChoose">已 选</span>
                </template>
            </van-cell>
            <!-- body-->
            <van-cell>
                <van-row style="color: #9a9b9d;font-size: 3.5vw;margin-bottom: 3vw">
                    <van-col span="6">
                        授课教师：
                    </van-col>
                    <van-col span="6" style="color: #6d6d6d;;font-weight:500;">
                        {{item.teacherName}}
                    </van-col>
                    <van-col>
                        上课时间：
                    </van-col>
                    <van-col style="color: #6d6d6d;;font-weight:500;">
                        第5-6节
                    </van-col>
                </van-row>
                <van-row style="color: #9a9b9d;font-size: 3.5vw;margin-bottom: 3vw">
                    <van-col span="6">
                        课程号：
                    </van-col>
                    <van-col span="6" style="color: #6d6d6d;;font-weight:500;">
                       {{item.courseNumber}}
                    </van-col>
                    <van-col>
                        容量：
                    </van-col>
                    <van-col style="color: #6d6d6d;;font-weight:500;">
                        {{ item.studentCnt }}
                    </van-col>
                </van-row>
                <van-row style="color: #9a9b9d;font-size: 3.5vw;">
                    <van-col span="6">
                        学分：
                    </van-col>
                    <van-col span="6" style="color: #6d6d6d;;font-weight:500;">
                        {{item.pointScore}}
                    </van-col>
                    <van-col >
                        已选：
                    </van-col>
                    <van-col style="color: #6d6d6d;;font-weight:500;">
                        {{item.selectStudentCnt}}
                    </van-col>
                    <!--状态-->
                    <van-col style="margin-left:85%">
                        <van-button type="warning" class="warning-class" size="small" v-if="item.isChoose"
                                    @click="handleSubmit(0,item.tcID)">取 消</van-button>
                        <van-button type="primary" class="primary-class" size="small"
                                    v-else @click="handleSubmit(1,item.tcID)">选 课</van-button>
                    </van-col>
                </van-row>
            </van-cell>
        </van-cell-group>
        <van-empty v-if="classList === null" image="search" description="无选课记录！"/>
    </div>
</template>

<script setup>
import {cancelChooseClassUrl, chooseClassUrl, getCourseListUrl} from "/@/api/new_module/select_class/index";
import {Dialog, Toast} from "vant";
import 'vant/es/dialog/style';

const route = useRoute()
const classList = ref([])
const id = ref(Number)
const getChooseCourseList = ()=>{
    id.value = route.query.id
    if (!id.value) return;
    getCourseListUrl(id.value).then((res)=>{
        classList.value = res.data.rows
      // console.log("res", res)
    })
}
const handleSubmit = async (type,tcID)=>{
        let tcid = tcID
        const requestData = {
            sdId: id.value,
            tcId: tcid
        }
        if(type === 0){ //取消按钮
            await Dialog.confirm({
                message:
                    '是否确认取消选课？',
            })
            .then(() => {
             cancelChooseClassUrl(requestData).then((res)=>{
                 Toast(`${res.data.msg}`);
                getChooseCourseList()
            })
            .catch(() => {
            });
        })
        }else if(type === 1){ //选课按钮
                await Dialog.confirm({
                    message:
                        '是否确认选课？',
                })
                .then(() => {
                    chooseClassUrl(requestData).then((res)=>{
                        Toast(`${res.data.msg}`);
                        getChooseCourseList()
                    })
                })
            .catch(() => {
            });
        }
}

watch(
    () => {
        // getChooseCourseList()
    },
)
onMounted(()=>{
    getChooseCourseList()
})
</script>

<style lang="scss" scoped>
.vancell-class{
    margin-top:3%;
}
.hLabel-class{
    width: 1.6vw;
    height: 5vw;
    background-color: #1B7EF2;
    border-radius: 0px 20px 0px 0px;
    margin-right:1vw;
}
.name-class{
    width:50vw;
    text-overflow:ellipsis;//显示省略号
    white-space:nowrap;//禁止换行
    overflow:hidden;//隐藏溢出
}
.view-class{
    margin-right:1vw;
}
.warning-class .primary-class{
    width:20vw;
    font-size:3.5vw
}
.primary-class{
    background-color:rgba(43,149,239,0.87);
}
</style>
